@use "sass:math";
@use "sass:color";

/**
 * 扩展配色方案
 * ----------------------
 * 结合 element-ui 和 lte-admin 的配色，
 * 这些颜色都比较鲜艳、饱满，能起到强调效果。
 *
 * default（默认）,info（信息），primary（强调）,success（成功）,warning（警告）,danger（危险），fatal（致命）
 * default：初始态，特殊场景下，需要一个状态能清除样式设计，比如：做 badge 的时候，有时候会期望以纯文本进行展示。
 * fatal：终结态，发生严重故障时候的状态。
 *
 * 关于命名规范，light-gray 确实可以简写成 lightgray，但是 light-yellow 不能简写，因此统一整理成下划线格式。
 */

// 黑白灰三大基础色
$sea-color-white: #fff; // 白色
$sea-color-black: #000; // 黑色

// 过去开发过程中，频繁用到 .text-gray 样式，推荐换成 .text-regular 这样的样式
// 后续如果需要实现，切换风格时候，整体风格不会发生影响
$sea-color-light-gray: #B1B3B7; // 灰色（浅）
$sea-color-dark-gray: #5F656C; // 灰色（深）

/**
 * 组件基本配色方案
 * ----------------------
 * 沿用 element-ui 的配色方案
 * 这些颜色相对淡一些，适合浅色主题
 */
$sea-color-gray: #909399;
$sea-color-gray-light-3: #B1B3B7;
$sea-color-gray-light-5: #C7C9CC;
$sea-color-gray-light-7: #DDDEE0;
$sea-color-gray-light-8: #E8E9EA;
$sea-color-gray-light-9: #F3F4F4;
$sea-color-gray-dark-2: #5F656C;

$sea-color-primary: #409eff;
$sea-color-primary-light-3: rgb(121, 187, 255);
$sea-color-primary-light-5: rgb(159, 206, 255);
$sea-color-primary-light-7: rgb(197, 225, 255);
$sea-color-primary-light-8: rgb(216, 235, 255);
$sea-color-primary-light-9: rgb(235, 245, 255);
$sea-color-primary-dark-2: rgb(51, 126, 204);

$sea-color-success: #67c23a;
$sea-color-success-light-3: rgb(148, 212, 117);
$sea-color-success-light-5: rgb(179, 224, 156);
$sea-color-success-light-7: rgb(209, 236, 195);
$sea-color-success-light-8: rgb(224, 242, 215);
$sea-color-success-light-9: rgb(239, 248, 235);
$sea-color-success-dark-2: rgb(82, 155, 46);

$sea-color-warning: #e6a23c;
$sea-color-warning-light-3: rgb(237, 189, 118);
$sea-color-warning-light-5: rgb(242, 208, 157);
$sea-color-warning-light-7: rgb(247, 227, 196);
$sea-color-warning-light-8: rgb(250, 236, 216);
$sea-color-warning-light-9: rgb(252, 245, 235);
$sea-color-warning-dark-2: rgb(184, 129, 48);

$sea-color-danger: #f56c6c;
$sea-color-danger-light-3: rgb(248, 152, 152);
$sea-color-danger-light-5: rgb(250, 181, 181);
$sea-color-danger-light-7: rgb(252, 210, 210);
$sea-color-danger-light-8: rgb(253, 225, 225);
$sea-color-danger-light-9: rgb(254, 240, 240);
$sea-color-danger-dark-2: rgb(196, 86, 86);

// 前景色 - 文字
$sea-text-color-primary: #303133;
$sea-text-color-regular: #606266;
$sea-text-color-secondary: #909399;
$sea-text-color-placeholder: #a8abb2;
$sea-text-color-disabled: #c0c4cc;

// 背景色 - 各类面板的颜色
$sea-fill-color-extra-light: #FAFCFF;
$sea-fill-color-lighter: #FAFAFA;
$sea-fill-color-light: #F5F7FA;
$sea-fill-color: #F0F2F5;
$sea-fill-color-dark: #EBEDF0;
$sea-fill-color-darker: #E6E8EB;
$sea-fill-color-blank: #FFF;

// 面板边框 - 按钮、盒模型
$sea-border-color-extra-light: #f2f6fc;
$sea-border-color-lighter: #ebeef5;
$sea-border-color-light: #e4e7ed;
$sea-border-color: #dcdfe6;
$sea-border-color-dark: #d4d7de;
$sea-border-color-darker: #cdd0d6;

// 面板边框
$sea-border-width: 1px;
$sea-border-style: solid;
$sea-border-color-hover: $sea-text-color-disabled;
$sea-border: $sea-border-width $sea-border-style $sea-border-color;

// 使用阴影作为边框 输入组件、按钮会用到
$sea-border-shadow: 0 0 0 1px #dcdfe6 inset;

// 边框圆角
$sea-border-radius-base: 4px;
$sea-border-radius-small: 2px;
$sea-border-radius-round: 20px;
$sea-border-radius-circle: 100%;

// 组件阴影，强化视觉效果
$sea-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
$sea-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
$sea-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
$sea-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);

// 半透明：一些 .disabled .active 样式基于这个色彩
$sea-overlay-color: rgba(0, 0, 0, 0.8);
$sea-overlay-color-light: rgba(0, 0, 0, 0.7);
$sea-overlay-color-lighter: rgba(0, 0, 0, 0.5);
$sea-overlay-color-extra-lighter: rgba(0, 0, 0, 0.3);
$sea-mask-color: rgba(255, 255, 255, 0.9);
$sea-mask-color-light: rgba(255, 255, 255, 0.7);
$sea-mask-color-lighter: rgba(255, 255, 255, 0.5);
$sea-mask-color-extra-light: rgba(255, 255, 255, 0.3);

// 通用禁用样式
$sea-disabled-bg-color: $sea-fill-color-light;
$sea-disabled-text-color: $sea-text-color-placeholder;
$sea-disabled-border-color: $sea-border-color-light;

// 通用面板背景色
$sea-bg-color: #ffffff;
$sea-bg-color-page: #f2f3f5;
$sea-bg-color-overlay: #ffffff;

// 动画持续特效时间 面板展开收缩动画
$sea-transition-duration: 0.3s;
$sea-transition-duration-fast: 0.2s;


/**
 * 字体
 * ----------------------
 */
// 字体大小
$sea-font-size-extra-large: 20px;
$sea-font-size-large: 18px;
$sea-font-size-medium: 16px;
$sea-font-size-base: 14px;
$sea-font-size-small: 13px;
$sea-font-size-extra-small: 12px;

// 标题大小
$sea-font-size-h1: math.floor(($sea-font-size-base * 2.6)); // ~36px
$sea-font-size-h2: math.floor(($sea-font-size-base * 2.15)); // ~30px
$sea-font-size-h3: math.ceil(($sea-font-size-base * 1.7)); // ~24px
$sea-font-size-h4: math.ceil(($sea-font-size-base * 1.25)); // ~18px
$sea-font-size-h5: $sea-font-size-base;
$sea-font-size-h6: math.ceil(($sea-font-size-base * 0.85)); // ~12px

// 字体行高
$sea-line-height-base: 1.428571429; // 20/14
// 字体外边框
$sea-line-height-margin-top: math.floor(($sea-font-size-base * $sea-line-height-base)); // ~20px
// h5-h6 的 margin
$sea-line-height-margin-computed: math.div($sea-line-height-margin-top, 2);

// 挺好用的免费字体
//font-family: Arial, sans-serif;

// adobe 公司提供的免费字体，广泛用于各种商业用途‌，英文会有较好展示效果
//$sea-font-family: 'Source Sans Pro', sans-serif;

// element-ui 同款字体设计
$sea-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

// 用于查看代码的字体（注意不可商用，用于制作开发辅助工具，与业务无关）
$sea-font-family-code: 'Consolas', sans-serif;

// 黑体、宋体、仿宋、隶书、楷体等基本字体是完全开源的，可以在任何场合免费使用而不会侵权‌
//$sea-font-family: '黑体';

// Consolas 是 eclipse 默认字体，适合用来看代码，不过不要商用
//$sea-font-family: 'Consolas';

// element-plus 推荐字体
//$sea-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;


/**
 * General: Box
 * ----------------------
 * 盒模型微调属性
 */
$sea-margin-vertical-larger: 18px;
$sea-margin-vertical-large: 14px;
$sea-margin-vertical: 10px;
$sea-margin-vertical-small: 6px;
$sea-margin-vertical-smaller: 2px;

$sea-margin-horizontal-larger: 18px;
$sea-margin-horizontal-large: 14px;
$sea-margin-horizontal: 10px;
$sea-margin-horizontal-small: 6px;
$sea-margin-horizontal-smaller: 2px;

$sea-margin-larger: $sea-margin-vertical-larger $sea-margin-horizontal-larger;
$sea-margin-large: $sea-margin-vertical-large $sea-margin-horizontal-large;
$sea-margin: $sea-margin-vertical $sea-margin-horizontal;
$sea-margin-small: $sea-margin-vertical-small $sea-margin-horizontal-small;
$sea-margin-smaller: $sea-margin-vertical-smaller $sea-margin-horizontal-smaller;

$sea-padding-horizontal-larger: 18px;
$sea-padding-horizontal-large: 14px;
$sea-padding-horizontal: 10px;
$sea-padding-horizontal-small: 6px;
$sea-padding-horizontal-smaller: 2px;

$sea-padding-vertical-larger: 18px;
$sea-padding-vertical-large: 14px;
$sea-padding-vertical: 10px;
$sea-padding-vertical-small: 6px;
$sea-padding-vertical-smaller: 2px;

$sea-padding-larger: $sea-padding-vertical-larger $sea-padding-horizontal-larger;
$sea-padding-large: $sea-padding-vertical-large $sea-padding-horizontal-large;
$sea-padding: $sea-padding-vertical $sea-padding-horizontal;
$sea-padding-small: $sea-padding-vertical-small $sea-padding-horizontal-small;
$sea-padding-smaller: $sea-padding-vertical-smaller $sea-padding-horizontal-smaller;

/**
 * 盒模型间隙
 * --------------------
 * 给组件添加 margin，将元素分隔开，去除最后一个的 margin；
 * 在我们的组件中，大部分都不包含默认边框设计，这个样式会非常有用。
 */
$sea-gap-width: $sea-margin-horizontal;
$sea-gap-height: $sea-margin-vertical;

/**
 * 经典色彩
 * --------------------
 * 其中 dark 可以作为 active 样式，可以增强视觉效果；
 * 注意没有 light 色值，这个需求设置 alpha 值会更加合理；
 */
$sea-color-red: #dd4b39; // 红色
$sea-color-red-dark: #d33724; // 红色（深）
$sea-color-orange: #ff851b; // 橙色
$sea-color-orange-dark: #ff7701; // 橙色（深）
$sea-color-yellow: #f39c12; // 黄色
$sea-color-yellow-dark: #db8b0b; // 黄色（深）
$sea-color-green: #00a65a; // 绿色
$sea-color-green-dark: #008d4c; // 绿色（深）
$sea-color-aqua: #00c0ef; // 水绿色（青色）
$sea-color-aqua-dark: #00a7d0; // 水绿色（深）
$sea-color-blue-light: #3c8dbc; // 蓝色（浅）
$sea-color-blue: #0073b7; // 蓝色
$sea-color-blue-dark: #005384; // 蓝色（深）
$sea-color-purple: #605ca8; // 紫色
$sea-color-purple-dark: #555299; // 紫色（深）

$sea-color-fuchsia: #f012be; // 品红色（紫红色）
$sea-color-fuchsia-dark: #db0ead; // 品红色（深，紫红色）
$sea-color-maroon: #d81b60; // 褐红色（栗色）
$sea-color-maroon-dark: #ca195a; // 褐红色（深，栗色）


$sea-color-navy: #001f3f; // 藏青色
$sea-color-navy-dark: #001a35; // 藏青色（深）
$sea-color-teal: #39cccc; // 蓝绿色
$sea-color-teal-dark: #30bbbb; // 蓝绿色（深）
$sea-color-olive: #3d9970; // 橄榄色
$sea-color-olive-dark: #368763; // 橄榄色（深）
$sea-color-lime: #01ff70; // 酸橙色
$sea-color-lime-dark: #00e765; // 酸橙色（深，亮绿色）


/**
 * 盒模型大小
 * --------------------------------------------
 * 单行输入框、下拉框、按钮等大小，需要对齐大小
 */
$sea-box-height-small: 24px;
$sea-box-height: 32px;
$sea-box-height-large: 40px;

/**
 * 扩展填充色
 * --------------------------------------------------
 * 用作定制更加复杂的界面，
 * 并不推荐使用这个配色方案，会导致配色过于复杂，
 */
$sea-fill-primary-extra-light: rgb(248, 252, 255);
$sea-fill-primary-light: rgb(244, 249, 255);
$sea-fill-primary-light: rgb(240, 247, 255);
$sea-fill-primary: rgb(235, 245, 255);
$sea-fill-primary-dark: rgb(226, 240, 255);
$sea-fill-primary-darker: rgb(216, 235, 255);

$sea-fill-success-extra-light: rgb(245, 250, 245);
$sea-fill-success-lighter: rgb(239, 248, 235);
$sea-fill-success-light: rgb(232, 245, 225);
$sea-fill-success: rgb(224, 242, 215);
$sea-fill-success-dark: rgb(217, 239, 205);
$sea-fill-success-darker: rgb(209, 236, 195);

$sea-fill-warning-extra-light: rgb(255, 250, 240);
$sea-fill-warning-lighter: rgb(254, 248, 238);
$sea-fill-warning-light: rgb(253, 246, 236);
$sea-fill-warning: rgb(252, 245, 235);
$sea-fill-warning-dark: rgb(251, 241, 225);
$sea-fill-warning-darker: rgb(250, 236, 216);

$sea-fill-danger-extra-light: rgb(255, 250, 250);
$sea-fill-danger-lighter: rgb(254, 247, 247);
$sea-fill-danger-light: rgb(253, 243, 243);
$sea-fill-danger: rgb(252, 240, 240);
$sea-fill-danger-dark: rgb(251, 233, 233);
$sea-fill-danger-darker: rgb(250, 225, 225);